<template>
  <!-- 骨架屏的高度宽度和背景，用绝对定位提高层级 -->
  <view v-if="show">
    <view
      :style="{
        width: windowWidth,
        height: windowHeight,
        backgroundColor: bgColor,
        position: 'absolute',
        zIndex: 9999,
        top: top,
        left: left,
      }"
    >
      <view
        v-for="(item, index) in rectNodes"
        :key="index + 'Rect'"
        class="skeleton-fade"
        :style="{
          width: item.width + 'px',
          height: item.height + 'px',
          backgroundColor: elColor,
          position: 'absolute',
          top: item.top + 'px',
          left: item.left + 'px',
        }"
      >
      </view>
      <view
        v-for="(item, index) in circleNodes"
        :key="index"
        class="skeleton-fade"
        :style="{
          width: item.width + 'px',
          height: item.height + 'px',
          backgroundColor: elColor,
          borderRadius: item.width / 2 + 'px',
          position: 'absolute',
          top: item.top + 'px',
          left: item.left + 'px',
        }"
      >
      </view>
    </view>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
export default {
  name: "skeleton",
  data() {
    return {
      show: true,
      windowWidth: systemInfo.windowWidth + "px",
      windowHeight: systemInfo.windowHeight + "px",
      bgColor: "#fff",
      elColor: "#e5e5e5",
      top: 0,
      left: 0,
      borderRadius: 10,
      rectNodes: [],
      circleNodes: [],
    };
  },
  mounted() {},
  methods: {
    start() {
      // 矩形骨架元素
      this.getRectEls();
      // 圆形骨架元素
      this.getCircleEls();
    },
    close() {
      this.show = false;
    },
    getRectEls() {
      let query = uni.createSelectorQuery().in(this.$parent);
      query
        .selectAll(".skeleton-rect")
        .boundingClientRect((res) => {
          console.log("rect", JSON.stringify(res));
          this.rectNodes = res;
        })
        .exec(function () {});
    },
    getCircleEls() {
      let query = uni.createSelectorQuery().in(this.$parent);
      query
        .selectAll(".skeleton-circle")
        .boundingClientRect((res) => {
          console.log("circle", JSON.stringify(res));
          this.circleNodes = res;
        })
        .exec(function () {});
    },
  },
};
</script>

<style>
.skeleton-fade {
  width: 100%;
  height: 100%;
  background: rgb(194, 207, 214);
  animation-duration: 1.5s;
  animation-name: blink;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}
</style>
